<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.DriverManager" %>
<%@ page import="java.sql.Statement" %>
<%@ page import="java.sql.ResultSet" %>
<%@ page import="com.db.PassageDetailDao" %>
<%@ page import="com.db.CommentDao" %>
<%@ page import="com.bean.*" %>
<%@ page import="com.bean.User" %>
<html>
<head>
    <title>travelDetails</title>
    <link rel="shortcut icon" href="webicon.ico" type="image/x-icon" />
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery.min.js"></script>
    <!-- Custom Theme files -->
    <!--menu-->
    <script src="js/scripts.js"></script>
    <link href="css/styles.css" rel="stylesheet">
    <!--//menu-->
    <!--theme-style-->
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
    <!--//theme-style-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="Real Home  Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>

    <jsp:useBean id="PassageDetail" class="com.db.PassageDetailDao" scope="request"></jsp:useBean>
    <%
        //请求travelList传递的passageID
        int passageID = Integer.parseInt(request.getParameter("passageID"));
        Passage passage=PassageDetail.queryPassage(passageID);
    %>

    <!-- table样式 -->
    <style type="text/css" media="all">

        table td{padding:10px;}
    </style>

</head>
<jsp:useBean id="countTime" scope="page" class="com.bean.CountTime"></jsp:useBean>
<body>
<!--header-->
<div class="navigation">
    <div class="container-fluid">
        <nav class="pull">
            <ul>
                <li><a  href="index.jsp">主页</a></li>
                <li><a  href="travelList.jsp?page=1">驴友游记</a></li>
                <li><a  href="share.jsp">发布游记</a></li>
            </ul>
        </nav>
    </div>
</div>

<div class="header">
    <div class="container">


        <div class="top-nav">
            <ul class="right-icons">

                <!--根据是否登录显示-->
                <li>
                    <% if(session.getAttribute("user") == null){ %>
                    <a  href="login.jsp">
                        <i class="glyphicon glyphicon-user">
                        </i>Login</a></li>
                <% } else {
                    //获取用户名name
                    int ID = ((User)(session.getAttribute("user"))).getUsername();
                    String name = ((User)(session.getAttribute("user"))).getName();%>
                <a  onclick="window.location.href='UserServlet?method=admin&ID=<%=ID%>'">
                    <i class="glyphicon glyphicon-user">
                    </i><%=name%></a></li>
                <% }
                %>

            </ul>

            <div class="nav-icon">
                <div class="hero fa-navicon fa-2x nav_slide_button" id="hero">
                    <a href="#"><i class="glyphicon glyphicon-menu-hamburger"></i> </a>
                </div>
            </div>

            <link href="css/popuo-box.css" rel="stylesheet" type="text/css" media="all"/>
            <script src="js/jquery.magnific-popup.js" type="text/javascript"></script>


            <script src="js/easyResponsiveTabs.js" type="text/javascript"></script>
            <script type="text/javascript">
                $(document).ready(function () {
                    $('#horizontalTab').easyResponsiveTabs({
                        type: 'default', //Types: default, vertical, accordion
                        width: 'auto', //auto or any width like 600px
                        fit: true   // 100% fit in a container
                    });
                });
            </script>
        </div>
    </div>
    <script>
        $(document).ready(function() {
            $('.popup-with-zoom-anim').magnificPopup({
                type: 'inline',
                fixedContentPos: false,
                fixedBgPos: true,
                overflowY: 'auto',
                closeBtnInside: true,
                preloader: false,
                midClick: true,
                removalDelay: 300,
                mainClass: 'my-mfp-zoom-in'
            });

        });
    </script>


</div>
<div class="clearfix"> </div>
<!--//-->
<div class=" banner-buying">
    <div class=" container">
        <h3><span><%=passage.getTitle()%></span></h3>
        <!---->

        <div class="clearfix"> </div>
        <!--initiate accordion-->
        <script type="text/javascript">
            $(function() {
                var menu_ul = $('.menu > li > ul'),
                    menu_a  = $('.menu > li > a');
                menu_ul.hide();
                menu_a.click(function(e) {
                    e.preventDefault();
                    if(!$(this).hasClass('active')) {
                        menu_a.removeClass('active');
                        menu_ul.filter(':visible').slideUp('normal');
                        $(this).addClass('active').next().stop(true,true).slideDown('normal');
                    } else {
                        $(this).removeClass('active');
                        $(this).next().stop(true,true).slideUp('normal');
                    }
                });

            });
        </script>

    </div>
</div>
<!--//header-->
<!--travelList-->
<div class="travelList">
    <div class="container">
        <div class="col-md-9 travelList-head" style="top:-20px">
            <div class="travelList-top">
                <table width="90%" border="0" cellpadding="0" cellspacing="0">

                    <tr >
                        <td colspan="2">
                            <div>
                                <pre><%=passage.getContent()%></pre>
                            </div>
                        </td>
                    </tr>
                </table>
                <div class="links">
                    <ul class="travelList-links">
                        <%if(session.getAttribute("user") != null)
                        {
                            int getID = ((User)(session.getAttribute("user"))).getUsername();

                        %>
                        <li><a onclick="window.location.href='CommentServlet?method=like&passageID=<%=passage.getPassageID()%>&userID=<%=getID%>'">
                            <i class="glyphicon glyphicon-heart"> </i><span>Like=<%=passage.getLike()%></span></a></li>
                        <%}
                        else{
                        %>

                        <li><a onclick="window.location.href='CommentServlet?method=like&passageID=<%=passage.getPassageID()%>'">
                            <i class="glyphicon glyphicon-heart"> </i><span>Like=<%=passage.getLike()%></span></a></li>

                        <%

                            }%>
                    </ul>
                </div>
            </div>

            <!--------------------------------评论------------------------------------->
            <div class="single-grid">
                <h5><font color="#52773E">评论</font></h5><hr>
                <% CommentDao connectMessageForNum = new CommentDao();
                    int resultNumber = connectMessageForNum.searchMessageNumber(passageID);

                    int time = 1;
                    int maxTime = 5;

                    int maxPageNum = (int)(Math.ceil((double)resultNumber/(double)maxTime));
                    String getID=new String(),getTitle=new String();
                    CommentDao connectComment = new CommentDao();
                    Comment newComment = new Comment();

                    //获取当前页面页码
                    int nowPage = Integer.parseInt(request.getParameter("page"));
                    time = time + (nowPage-1)*maxTime;%>


                <%if(maxPageNum==0){ %><div class="media">

                <div class="media-body">
                    <p>（此文章暂无评论）</p>
                </div>
            </div>
                <%}else{ %>
                <%
                    while((time-(nowPage-1)*maxTime)<=maxTime && time<=resultNumber)
                    {
                    	connectComment.searchComment(newComment,time,passageID);
                %>
                <div class="media">

                    <div class="media-body">
                        <a><h4 class="media-heading"><%=newComment.getMsgName() %>></h4></a>
                        <p><%=newComment.getMsgDate() %></p>
                        <p><%=newComment.getMsgContent() %></p>
                    </div>
                    <hr>
                </div>
                <%
                            time++;
                        }
                    }
                %>

                <div class="nav-page">
                    <nav>
                        <ul class="pagination">
                            <li><a href="travelDetails.jsp?passageID=<%=passageID %>&page=1" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
                            <%for(int m=1;m<=maxPageNum;m++){%>
                            <% if(m==nowPage)
                            {
                            %>
                            <li><a href="travelDetails.jsp?passageID=<%=passageID %>&page=<%=m%>" class="active"><%=m%><span class="sr-only">(current)</span></a></li>
                            <% }else{%>
                            <li><a href="travelDetails.jsp?passageID=<%=passageID %>&page=<%=m%>"><%=m%></a></li>
                            <%}
                            }%>
                            <li><a href="travelDetails.jsp?passageID=<%=passageID %>&page=<%=maxPageNum%>" aria-label="Next"><span aria-hidden="true">»</span></a></li>



                        </ul>
                    </nav>
                </div>

            </div>
            <!--------------------------------评论------------------------------------->


            <div class="leave">
                <h5><font color="#52773E">发表你的看法</font></h5>
                <form action="CommentServlet?method=comment" method="post" name="messsagefrom">
                    <input type="hidden" name="method" value="comment">
                    <!--获取用户ID，如果未登录则无法上传-->
                    <% if(session.getAttribute("user") != null){
                        int username = ((User)(session.getAttribute("user"))).getUsername();
                        String name = ((User)(session.getAttribute("user"))).getName();
                    %>

                    <input type="hidden" name="ID" value="<%=username%>">
                    <input type="hidden" name="name" value="<%=name%>">
                    <%}else{%>
                    <input type="hidden" name="ID" value="">
                    <%}%>
                    <input type="hidden" id="passage_id" name="passage_id" value="<%=passage.getPassageID()%>">
                    <textarea id="message_content" name="message_content" placeholder="请在此处填写评论。" required></textarea>
                    <input type="hidden" id="message_time" name="message_time" value="<%=countTime.currentlyTime()%>">
                    <label class="hvr-sweep-to-right">
                        <input type="submit" value="评论">
                    </label>
                </form>
            </div>
        </div>
        <div class="col-md-3 travelList-sidebar" style="position:fixed;right:100px;top:350px">
            <div class="travelList-list">
                <h4><font color="#52773E">文章信息</font></h4><hr>
                <ul >

                    <li><i class="glyphicon glyphicon-arrow-right"> </i>游记标题：</li>
                    <li><br></li>
                    <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#52773E"><%=passage.getTitle()%></font></li>
                    <li><br></li>
                    <li><i class="glyphicon glyphicon-arrow-right"> </i>发布时间：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#52773E"><%=passage.getDate() %></font></li>
                    <li><br></li>
                    <li><i class="glyphicon glyphicon-arrow-right"> </i>游记作者：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#52773E"><%=passage.getAuthorName() %></font></li>
                    <li><br></li>
                    <li><i class="glyphicon glyphicon-arrow-right"> </i>游记城市：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#52773E"><%=passage.getCity() %></font></li>
                    <li><br></li>
                    <li><i class="glyphicon glyphicon-arrow-right"> </i>旅游天数：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#52773E"><%=passage.getDays() %>&nbsp;天</font></li>
                    <li><br></li>
                    <li><i class="glyphicon glyphicon-arrow-right"> </i>旅游花费：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#52773E"><%=passage.getCost() %>&nbsp;元</font></li>
                    <li><br></li>
                    <li><br></li>
                </ul>
                <br><br><br>
                
                <div class="clearfix"> </div>
            </div>

        </div>
        <div class="clearfix"> </div>

    </div>
</div>
<!--//travelList-->

</body>
</html>